<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行学天下-首页</title>
  <link rel="stylesheet" href="css/index.css">
  <!-- 从静态资源服务器引入jQuery  bootcdn 加速服务-->
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
    // <script type="text/javascript" src="js/jquery.js">
  </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <div class="headLeft">
        <div class="logo">
          行学天下
        </div>
        <div class="title">
          行学天下
        </div>
      </div>
      <div class="headRight">
        <div class="callMe">
          <a href="#callMe">
            <img src="image/callMe.png" alt="图片丢失了">
            联系我们
          </a>
        </div>
      </div>
    </div>
    <!-- 自己写的轮播图 -->
    <!-- <div class="lunBoTu">
      <div class="lunBoTuImg">
        <ul>
          <li class="item" style="display: block;">
            <img src="image/picture1.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture2.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture3.jpg" alt="图片丢失">
          </li>
        </ul>
      </div>
      <div class="lnBtn">
        <div class="lastBtn">
          <img src="image/last.png" alt="图片丢失">
        </div>
        <div class="nextBtn">
          <img src="image/next.png" alt="图片丢失">
        </div>
      </div>
      <div class="smallBtn">
        <ul>
          <li class="btn active"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
      </div>
    </div> -->
    <!-- 引入组件库的轮播图 -->
    <!-- {{carousel}} -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in carousel" :key="item.id">
        <img :src="item.url" alt="">
      </el-carousel-item>
    </el-carousel>
    <!-- 精选游学项目 -->
    <div class="youXue">
      <div class="myH2">
        精选游学项目
      </div>
      <!-- {{project}} -->
      <div class="myUl" v-for="item in project" @click="toDetails(item.id)">
        <img v-if="!item.figure" src="image/img1.jpg" alt="">
        <img v-else :src="item.figure" alt="">
        <div class="title">{{item.name}}</div>
        <div class="date">{{ formatDate(item.beginTime) }} ~ {{formatDate(item.endTime)}}</div>
        |
        <div class="city">{{item.region}}</div>
        <div class="desc">{{item.introduce}}</div>
      </div>
    </div>
    <!-- 学生风采 -->
    <div class="fengCai">
      <div class="myH2">
        学生风采
      </div>
      <div class="myFengCaiDiv">
        <!-- {{article}} -->
        <div class="myFengCai" v-for="item in article" @click="toStudent(item.id)">
          <el-empty v-if="!item.cover" description="没有图片" :image-size="100"></el-empty>
          <img v-else :src="item.cover" alt="">
          <div class="title">{{item.title.length < 22?item.title:item.title.slice(0,22)+'...'}}</div>
          <div class="date">{{formatDate(item.publishTime)}}</div>
          <div class="name">{{item.baseUser.realname}}</div>
          <div class="like"><i class="el-icon-star-off"></i>{{item.thumpUp}}</div>
          <div class="likeBtn">
            <el-button type="warning" icon="el-icon-star-off" circle @click.stop="thumbUp(item.id)"></el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="wenTi">
      <div class="myH2">
        常见问题
      </div>
      <div class="myWenTi">
        <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？
        </div>
        <div class="desc">
          其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。
        </div>
        <img src="image/photo1.jpg" alt="">
      </div>
      <div class="myWenTi">
        <div class="title">参加夏令营到底有什么好处？
        </div>
        <div class="desc">
          国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。
        </div>
        <img src="image/photo1.jpg" alt="">
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom=200>
    </el-backtop>
    <!-- 页面底部信息 -->
    <div class="footer">
      <div id="callMe" class="callMe">
        联系我们（工作时间：9:00-17:30）
        021-56778147
        <a href="https://briup.cn">https://briup.cn</a>
        <!-- 通过qq实现在线客服功能 -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1729448763&Site=%e6%9d%b0%e6%99%ae&Menu=yes">在线客服</a>
      </div>
      <div class="beiAn">
        <a href="http://beian.miit.gov.cn">
          京ICP备XXXXXXX号
        </a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
      </div>
      <div class="callMe">
        ©1999-2021杰普软件科技有限公司
      </div>
    </div>

  </div>
  </div>
</body>

<!-- <script>
  var index = 0;
  var timer;
  // 通过定时器切换图片
  function myTimer() {
    timer = setInterval(
      function () {
        index++;
        if (index > 2) {
          index = 0
        }
        $('.item').eq(index).show().siblings().hide();
        // 改变小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
      }, 3000
    )
  }
  this.myTimer();
  var that = this;
  // 通过左右键切换图片
  $('.nextBtn').click(function () {
    index++;
    if (index > 2) {
      index = 0;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  $('.lastBtn').click(function () {
    index--;
    if (index < 0) {
      index = 2;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  // 点击小圆点切换图片
  $('.btn').click(function () {
    // 获取用户点击的列表元素下标
    index = $(this).index();
    // 切换图片
    $('.item').eq(index).show().siblings().hide();
    // 给小圆点添加样式
    $(this).addClass('active').siblings().removeClass('active')
    // 重置定时器
    clearInterval(timer);
    that.myTimer();
  })
</script> -->

<!-- 请求网络数据 -->
<script>
  new Vue({
    el: '#app',
    data: {
      project: [],
      article: [],
      carousel: [],
    },
    created() {
      this.findProject();
      this.findArticle();
      this.findCarousel();
    },
    methods: {
      // 查询游学项目
      findProject() {
        axios.get('http://47.94.46.113:8888/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
          this.project = res.data.data.list
        })
      },
      // 将时间戳格式化
      formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
      // 查询学生风采
      findArticle() {
        axios.get('http://47.94.46.113:8888/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
          this.article = res.data.data.list
        })
      },
      // 查询所有轮播图
      findCarousel() {
        axios.get('http://47.94.46.113:8888/index/carousel/findAll').then((res) => {
          this.carousel = res.data.data
        })
      },
      // 跳转到游学项目详情页面
      toDetails(id) {
        window.location.href = "details.html?id=" + id;
      },
      // 跳转到学生风采
      toStudent(id) {
        window.location.href = "fengcai.html?id=" + id;
      },
      // 学生风采点赞
      thumbUp(id) {
        axios.get('http://47.94.46.113:8888/index/article/thumbUp?id=' + id).then((res) => {
          // 刷新点赞数
          this.findArticle();
          this.$message({
            message: res.data.message,
            type: 'success'
          });
        })
      }
    }
  })
</script>

</html>